<template>
	<view>
		<u-sticky :offsetTop="0">
			<uni-nav-bar title="乐宝通订单" left-icon="back" :status-bar="true" :border="false" background-color="transparent"
				@clickLeft="$tab.back()" color="#FFF">
			</uni-nav-bar>
			<view class="navTop bg-theme">
				<view class="selectBox flex align-center">
					<view class="" @click="
              selectIndex = 1;
              refresh();
            ">
						我的求购单
					</view>
					<view class="" @click="
              selectIndex = 2;
              refresh();
            ">
						我的出售单
					</view>
					<view class="shade" :style="{
              left: selectIndex == 1 ? '8rpx' : '342rpx',
            }">
					</view>
				</view>

				<view class="mt-28 ">
					<u-tabs :list="selectIndex == 1 ? asktabsList : sellTabsList"
						:current="selectIndex == 1 ? asktabsIndex : selltabsIndex" lineWidth="30" lineColor="#FCDE2E"
						keyName="label" :activeStyle="{
              color: '#FFF',
              fontWeight: 'bold',
              transform: 'scale(1.05)',
            }" :inactiveStyle="{
              color: '#FFF',
              transform: 'scale(1)',
            }" @change="tabsChange">
					</u-tabs>
				</view>
			</view>
		</u-sticky>

		<view class="px-20 content">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false"
				v-show="list.length != 0">
				<view class="px-16 py-24 bg-white round-12 mt-28" v-for="(item, index) in list" :key="index"
					@click="goDetal(item.id)">
					<!-- 求购单 -->
					<view class="flex align-center justify-between">
						<view class="">
							{{ item.demandNo }}
						</view>
						<view class="text-grey" @click.stop="goDetal(item.id)" v-if="selectIndex == 1">
							查看详情
						</view>
						<view class="" :style="{
                color:
                  item.state == 1
                    ? '#FF820E'
                    : item.state == 3
                    ? '#CDCDCD'
                    : item.state == 4
                    ? '#CDCDCD'
                    : '#FF820E',
              }" v-else>
							{{ stateTxt(item) }}
						</view>
					</view>

					<view class="mt-24 mb-24">
						<u-line color="#F4F4F4"></u-line>
					</view>

					<view class="flex align-center justify-between">
						<view class="">
							<view class="text-32 ">
								订单单价：{{ item.price }}
							</view>
							<view class="text-32 ">
								{{ selectIndex == 1 ? "总求购量" : "出售量" }}：{{ item.nums }}
							</view>
							<view class="text-32 ">
								订单总额：{{ item.totalPrice }}
							</view>
						</view>

						<view class="" :style="{
                color:
                  item.state == 1
                    ? '#FF820E'
                    : item.state == 3
                    ? '#CDCDCD'
                    : item.state == 4
                    ? '#CDCDCD'
                    : '#FF820E',
              }" v-if="selectIndex == 1">
							{{ stateTxt(item) }}
						</view>
					</view>

					<view class="mt-24 flex align-center justify-between" v-if="selectIndex == 1">
						<view class="flex align-center">
							<view class="text-grey"> 待付款： </view>
							<view class=""> {{ item.noPaymentNum }}笔 </view>
							<image src="http://img.kxjb1319.com/gsgxStatic/Marketlist/icon_xiangqign@2x.png" mode=""
								style="width: 32rpx; height: 32rpx"></image>
						</view>
						<view class="flex align-center">
							<view class="text-grey"> 待确认： </view>
							<view class=""> {{ item.noConfirmNum }}笔 </view>
							<image src="http://img.kxjb1319.com/gsgxStatic/Marketlist/icon_xiangqign@2x.png" mode=""
								style="width: 32rpx; height: 32rpx"></image>
						</view>
					</view>

					<view class="flex align-center" :class="{
              'mt-48': selectIndex == 1,
            }">
						<view class="text-grey">
							{{ selectIndex == 1 ? "发布时间：" : "出售时间：" }}
						</view>
						<view class="">
							{{ item.createTime }}
						</view>
					</view>

					<view class="py-24" v-if="selectIndex == 2">
						<u-line color="#F4F4F4"></u-line>
					</view>

					<view class="" v-if="selectIndex == 2">
						求购人:{{ item.payMarketDemand.createUserTemp.nickName }}
					</view>
					<view class="" v-if="selectIndex == 2">
						求购单号:{{ item.payMarketDemand.demandNo }}
					</view>
					<view class="" v-if="selectIndex == 2">
						求购数量:{{ item.payMarketDemand.nums }}
					</view>
					<view class="" v-if="selectIndex == 2">
						求购单价:{{ item.payMarketDemand.price }}
					</view>

					<view class="mt-32 flex algin_c" v-if="selectIndex == 2">
						<view class="flex align-center flex-col" v-if="item.payCert">
							<image :src="item.payCert"  @click="previewImage(item.payCert)"
								style="width: 144rpx; height: 144rpx" mode=""></image>
							<view class="fontS-24  mt-12 text-center">
								付款凭证
							</view>
						</view>

						<!-- 	<view class="flex align-center flex_c ml-16">
							<image :src="item.paymentCert" mode="" v-if="item.paymentCert" class="u-upload__button"
								@click="previewImage(item.paymentCert)"></image>
							<u-upload :fileList="item.fileList" @afterRead="afterRead($event, index)"
								@delete="deletePic(item)" :name="item.id" :maxCount="1" v-else></u-upload>
							<view class="fontS-24  mt-10 text-center">
								上传收款凭证
							</view>
						</view> -->
					</view>

					<!-- 我的求购单 -->
					<view class="mt-28 flex justify-between align-end" style="flex-direction: row-reverse">
						<view class="withdrawal fontS-28 text-FFF text-center" @click.stop="withdrawal(item.id)"
							v-if="item.state == 0 && selectIndex == 1">
							我要撤单
						</view>
						<view class="withdrawal fontS-28 text-FFF text-center"
							@click.stop="makePhone(item.payMarketDemand.createUserTemp.phonenumber)"
							v-if="selectIndex == 2">
							联系求购方
						</view>
						<view class="withdrawal fontS-28 text-FFF text-center" @click.stop="confirm(item.id)"
							v-if="selectIndex == 2 && item.payCert && item.state == 1">
							确认完成
						</view>

						<!-- 	<view class="withdrawal fontS-28 text-FFF text-center" @click.stop="uploadgathering(item)"
							v-if="selectIndex == 2 && !item.paymentCert && item.state == 1">
							确认上传
						</view> -->

						<view class="withdrawal fontS-28 text-FFF text-center"
							@click.stop="previewImage('https://file.fulewanjia.com/fulewanjia/profile/appImages/common/kefu.jpg')" v-if="selectIndex == 2">
							平台客服接入
						</view>

						<view class="flex align-center" v-if="selectIndex == 1">
							<view class="text-grey"> 支付方式： </view>
							<view class="fontS-20 ml-16 border-r4 text-FFF" style="padding: 4rpx 12rpx" :style="{
                  background: item.payWay == 1 ? '#49C43C' : '#3BADFF',
                }">
								{{ item.payWay == 1 ? "微信" : "支付宝" }}
							</view>
						</view>
					</view>
				</view>
			</s-pull-scroll>

			<isShow :is-show="list.length == 0"></isShow>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectIndex: 1,
				list: [],

				// 求购
				asktabsList: [{
						label: "待接单",
						value: 0,
					},
					{
						label: "进行中",
						value: 1,
					},
					{
						label: "已完成",
						value: 2,
					},
					{
						label: "已过期",
						value: 3,
					},
					{
						label: "已取消",
						value: 4,
					},
				],
				asktabsIndex: 0,

				// 出售
				sellTabsList: [{
						label: "待付款",
						value: 0,
					},
					{
						label: "待确认",
						value: 1,
					},
					{
						label: "已完成",
						value: 2,
					},
					{
						label: "已过期",
						value: 3,
					},
				],
				selltabsIndex: 0
			};
		},
		onShow() {
			this.refresh();
		},
		computed: {},
		methods: {
			deletePic(e) {
				e.fileList = [];
			},
			async afterRead(event, index) {
				console.log(event.file.url, "event");
				const res = await this.$api.common.uploadFile(event.file.url);
				console.log(res, "上传");
				this.list[index].fileList.push({
					url: res.url,
				});
			},
			tabsChange(e) {
				if (this.selectIndex == 1) {
					this.asktabsIndex = e.index;
				} else {
					this.selltabsIndex = e.index;
				}
				this.refresh();
			},
			back() {
				this.$timeGoBack(0);
			},
			previewImage(img) {
				uni.previewImage({
					urls: [img],
				});
			},
			confirm(id) {
				this.$modal.confirm("请查看收款流水后再确定!").then((con) => {
					if (con) {
						if (this.selectIndex == 1) {
							this.$Api.currency.payUpdateDemand(id, 4).then((res) => {
								console.log(res, "求购取消");
								this.refresh();
								this.$modal.msg("操作成功!");
							});
						}
						if (this.selectIndex == 2) {
							this.$Api.currency.sellFinishDemand(id).then((res) => {
								this.$modal.msg("操作成功!");
								this.refresh();
							});
						}
					}
				});
			},
			stateTxt(item) {
				let value;
				if (this.selectIndex == 1) {
					this.asktabsList.forEach(i => {
						if (i.value == item.state) {
							value = i.label
						}
					})
				}
				if (this.selectIndex == 2) {
					this.sellTabsList.forEach(i => {
						if (i.value == item.state) {
							value = i.label
						}
					})
				}
				return value;
			},
			// 出售单撤单
			async withdrawal(id) {
				this.$modal.confirm("确认撤单吗？").then((con) => {
					if (con) {
						if (this.selectIndex == 1) {
							this.$Api.currency.payUpdateDemand(id, 4).then((res) => {
								console.log(res, "求购取消");
								this.refresh();
								this.$modal.msg("撤单成功!");
							});
						}
						if (this.selectIndex == 2) {
							this.$Api.currency.sellCancelDemand(id).then((res) => {
								this.refresh();
								this.$modal.msg("撤单成功!");
								console.log(res, "出售方取消订单");
							});
						}
					}
				});
			},
			goDetal(id) {
				if (this.selectIndex == 1) {
					uni.navigateTo({
						url: "/pages/mine/market/detail?id=" + id,
					});
				}
			},
			async uploadgathering(item) {
				if (item.fileList.length == 0) {
					this.$modal.msg("请先上传收款凭证!");
					return;
				}
				const res = await this.$Api.currency.marketDemand({
					id: item.id,
					paymentCert: item.fileList[0].url,
				});
				this.$modal.msg("上传成功!");
				this.refresh();
			},
			makePhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			back() {
				this.$timeGoBack(0);
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(() => {
					this.$Api.currency.marketDemandmineList({
						pageSize: 10,
						pageNum: pullScroll.page,
						releaseType: this.selectIndex,
						state: this.selectIndex == 1 ? this.asktabsList[this.asktabsIndex].value : this
							.sellTabsList[this.selltabsIndex].value,
					}).then((res) => {
						console.log(res, "市场列表");
						if (pullScroll.page == 1) {
							this.list = [];
						}
						res.rows = res.rows || []
						if (this.selectIndex == 2) {
							res.rows.forEach(item => {
								item.fileList = []
							})
						}

						this.list = this.list.concat(res.rows);

						if (this.list.length >= res.total) {
							pullScroll.finish();
						} else {
							pullScroll.success();
						}
					});
				}, 500);
			},
		},
	};
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	/deep/ .u-sticky {
		top: 0 !important;
	}

	/deep/ .u-upload__button {
		width: 144rpx !important;
		height: 144rpx !important;
		margin: 0;
	}

	.navTop {
		height: 424rpx;
		padding-top: 200rpx;

		.selectBox {
			width: 686rpx;
			height: 96rpx;
			background: #FFF;
			border-radius: 48rpx;
			margin: 0 auto;
			position: relative;

			view {
				width: 50%;
				height: 100%;
				text-align: center;
				line-height: 96rpx;
				font-size: 28rpx;
				position: relative;
				z-index: 99;
			}

			.shade {
				width: 334rpx;
				height: 80rpx;
				background: #FFDE05;
				box-shadow: inset 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.302);
				position: absolute;
				top: 8rpx;
				z-index: 9;
				border-radius: 40rpx;
				transition: 0.5s;
			}
		}
	}

	.withdrawal {
		width: 192rpx;
		height: 60rpx;
		background: linear-gradient(180deg, #ffb23a 0%, #ff5617 100%);
		border-radius: 30rpx;
		line-height: 60rpx;
	}

	.image-1 {
		width: 56rpx;
		height: 56rpx;
	}

	.qrBox {
		width: 144rpx;
		height: 144rpx;
		background: #fafff5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 2rpx solid #728619;
	}

	.uploadBtn {
		width: 192rpx;
		height: 60rpx;
		background: linear-gradient(180deg, #ffb23a 0%, #ff5617 100%);
		border-radius: 30rpx;
		line-height: 60rpx;
	}
</style>